<template>
  <div class="box">
    <el-tabs v-model="activeName" @tab-click="yshandleClick">
      <el-tab-pane label="应收账单" name="first">
        <el-row>
          <el-col :span="24">
            <div class="header">
              <el-form
                ref="billForm"
                :model="billForm"
                label-width="100px"
                class="flex-start"
              >
                <el-form-item label="账单名称" prop="checkName">
                  <el-input
                    v-model="billForm.checkName"
                    placeholder="请输入账单名称"
                    style="width: 286px"
                  />
                </el-form-item>
                <el-form-item
                  label="时间范围"
                  style="width: 770px"
                  prop="timeRange"
                >
                  <div class="flex">
                    <el-radio
                      v-model="billForm.timeType"
                      :label="1"
                    >出账时间</el-radio>
                    <el-radio
                      v-model="billForm.timeType"
                      :label="2"
                    >收款时间</el-radio>
                    <el-date-picker
                      v-model="Time"
                      type="daterange"
                      style="width: 562px"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      @change="billDateChange"
                    />
                  </div>
                </el-form-item>
                <el-form-item label="账单类型" prop="checkType">
                  <el-select
                    v-model="billForm.checkType"
                    placeholder="请选择账单类型"
                    style="width: 286px"
                  >
                    <el-option label="客户" value="客户" />
                    <el-option label="承包区" value="承包区" />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button class="cx" @click="billSearch">查询</el-button>
                  <el-button class="cz" @click="billClear">重置</el-button>
                </el-form-item>

                <el-form-item label="账单对象" prop="checkObjectName">
                  <el-input
                    v-model="billForm.checkObjectName"
                    placeholder="请选择账单对象"
                    style="width: 286px"
                  />
                </el-form-item>
                <el-form-item label="收款状态" prop="collectType">
                  <el-select
                    v-model="billForm.collectType"
                    placeholder="请选择收款状态"
                    style="width: 286px"
                  >
                    <el-option label="未收款" value="未收款" />
                    <el-option label="已收款" value="已收款" />
                    <el-option label="部分收款" value="部分收款" />
                    <el-option label="溢收款" value="溢收款" />
                  </el-select>
                </el-form-item>
                <el-form-item label="结算科目" prop="settleSubjectId">
                  <el-cascader
                    v-model="billForm.settleSubjectId"
                    :show-all-levels="false"
                    :options="YsSettleSubjectList"
                    :props="props"
                    style="width: 286px"
                    @change="yshandleChange"
                  />
                </el-form-item>
                <el-form-item label="数据来源" prop="dataSource">
                  <el-select
                    v-model="billForm.dataSource"
                    placeholder="请选择数据来源"
                    style="width: 286px"
                  >
                    <el-option label="系统" value="系统" />
                    <el-option label="手工" value="手工" />
                  </el-select>
                </el-form-item>
                <el-form-item label="所属业务员" prop="payer">
                  <el-input
                    v-model="billForm.payer"
                    placeholder="请选择所属业务员"
                    style="width: 286px"
                  />
                </el-form-item>
                <el-form-item label="单号" prop="codes">
                  <el-input
                    v-model="billCodesString"
                    placeholder="请输入单号,多个单号以逗号隔开"
                    style="width: 286px"
                  />
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="6">
            <div class="page">
              已经选择<span>{{ multipleSelection.length }}</span>项数据/ 当前页共<span>{{ billTableData.length }}</span>项
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <elltable
                ref="multipleTable"
                :loading="ysloading"
                :data="billTableData"
                :th="ysth"
                :n="2"
                @selection-change="yshandleSelectionChange"
              >
                <template v-slot:before-columns>
                  <el-table-column
                    v-if="billTableData.length > 0"
                    type="selection"
                    width="55"
                  />
                </template>
              </elltable>
            </div>
          </el-col>
        </el-row>
        <div class="block" style="display: flex; justify-content: flex-end">
          <pagination
            :current-page="billForm.pageDate.pageNum"
            :page-size="billForm.pageDate.pageSize"
            :total="billTotal"
            @size-change="yshandleSizeChange"
            @current-change="yshandleCurrentChange"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="应付账单" name="second">
        <el-row>
          <el-col :span="24">
            <div class="header">
              <el-form
                ref="payForm"
                :model="payForm"
                label-width="100px"
                class="flex-start"
              >
                <el-form-item label="账单名称" prop="checkName">
                  <el-input
                    v-model="payForm.checkName"
                    placeholder="请输入账单名称"
                    style="width: 286px"
                  />
                </el-form-item>
                <el-form-item label="时间范围">
                  <el-date-picker
                    v-model="Time"
                    type="daterange"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="payDateChange"
                  />
                </el-form-item>

                <el-form-item label="账单类型" prop="checkType">
                  <el-select
                    v-model="payForm.checkType"
                    placeholder="请选择账单类型"
                    style="width: 286px"
                  >
                    <el-option label="客户" value="客户" />
                    <el-option label="承包区" value="承包区" />
                  </el-select>
                </el-form-item>
                <el-form-item label="账单对象" prop="checkObjectName">
                  <el-input
                    v-model="payForm.checkObjectName"
                    placeholder="请选择账单对象"
                    style="width: 286px"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button class="cx" @click="paySearch">查询</el-button>
                  <el-button class="cz" @click="payClear">重置</el-button>
                </el-form-item>

                <el-form-item label="付款状态" prop="payStatus">
                  <el-select
                    v-model="payForm.payStatus"
                    placeholder="请选择收款状态"
                    style="width: 286px"
                  >
                    <el-option label="未收款" value="未收款" />
                    <el-option label="已收款" value="已收款" />
                    <el-option label="部分收款" value="部分收款" />
                    <el-option label="溢收款" value="溢收款" />
                  </el-select>
                </el-form-item>
                <el-form-item label="结算科目" prop="settleSubjectId">
                  <el-select
                    v-model="payForm.settleSubjectId"
                    placeholder="请选择结算科目"
                    style="width: 286px"
                  >
                    <el-option
                      v-for="item in YsSettleSubjectList"
                      :key="item.id"
                      :label="item.title"
                      :value="item.title"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="数据来源" prop="dataSource">
                  <el-select
                    v-model="payForm.dataSource"
                    placeholder="请选择数据来源"
                    style="width: 286px"
                  >
                    <el-option label="系统" value="系统" />
                    <el-option label="手工" value="手工" />
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="6">
            <div class="page">
              当前页共<span>{{ payTableData.length }}</span>项
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <elltable
                ref="multipleTable"
                :loading="yfloading"
                :data="payTableData"
                :th="yfth"
                :n="2"
                @selection-change="yfhandleSelectionChange"
              >
                <template v-slot:after-columns>
                  <el-table-column
                    v-if="payTableData.length > 0"
                    prop="name"
                    label="操作"
                    width="120"
                    fixed="right"
                  />
                </template>
              </elltable>
            </div>
          </el-col>
        </el-row>
        <div class="block" style="display: flex; justify-content: flex-end">
          <pagination
            :current-page="payForm.pageDate.pageNum"
            :page-size="payForm.pageDate.pageSize"
            :total="payTotal"
            @size-change="yfhandleSizeChange"
            @current-change="yfhandleCurrentChange"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="手工账单录入" name="third">
        <el-row>
          <el-col :span="24">
            <div class="header">
              <el-form
                ref="handForm"
                :model="handForm"
                label-width="100px"
                class="flex-start"
              >
                <el-form-item label="所属网点" prop="networkNameId">
                  <el-select
                    v-model="handForm.networkNameId"
                    placeholder="请选择所属网点"
                  >
                    <el-option
                      v-for="item in networkList"
                      :key="item.id"
                      :label="item.networkName"
                      :value="item.networkName"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="创建时间">
                  <el-date-picker
                    v-model="Time"
                    type="daterange"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="handDateChange"
                  />
                </el-form-item>
                <el-form-item label="收付类型" prop="closedPayType">
                  <el-select
                    v-model="handForm.closedPayType"
                    placeholder="请选择收付类型"
                    style="width: 286px"
                  >
                    <el-option label="应收" value="应收" />
                    <el-option label="应付" value="应付" />
                  </el-select>
                </el-form-item>

                <el-form-item label="对象类型" prop="objectType">
                  <el-select
                    v-model="handForm.objectType"
                    placeholder="请选择对象类型"
                    style="width: 286px"
                  >
                    <el-option label="客户" value="客户" />
                    <el-option label="承包区" value="承包区" />
                    <el-option label="业务员" value="业务员" />
                  </el-select>
                </el-form-item>

                <el-form-item>
                  <el-button class="cx" @click="handSearch">查询</el-button>
                  <el-button class="cz" @click="handClear">重置</el-button>
                </el-form-item>
                <el-form-item label="对象名称" prop="objectName">
                  <el-input
                    v-model="handForm.objectName"
                    placeholder="请选择结算对象"
                    style="width: 286px"
                  />
                </el-form-item>
                <el-form-item label="结算科目" prop="settleSubjectId">
                  <el-cascader
                    v-model="handForm.settleSubjectId"
                    :show-all-levels="false"
                    :options="YsSettleSubjectList"
                    :props="props"
                    style="width: 286px"
                    @change="handhandleChange"
                  />
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="6">
            <div class="page">
              当前页共<span>{{ handTableData.length }}</span>项
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <elltable
                ref="multipleTable"
                :loading="sgloading"
                :data="handTableData"
                :th="sgth"
                :n="2"
                @selection-change="sghandleSelectionChange"
              >
                <template v-slot:after-columns>
                  <el-table-column
                    v-if="handTableData.length > 0"
                    prop="name"
                    label="操作"
                    width="120"
                    fixed="right"
                  />
                </template>
              </elltable>
            </div>
          </el-col>
        </el-row>
        <div class="block" style="display: flex; justify-content: flex-end">
          <pagination
            :current-page="handForm.pageDate.pageNum"
            :page-size="handForm.pageDate.pageSize"
            :total="handTotal"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  getOutletsList,
  accountReceivableSearch,
  getnetworkList,
  billPayableSearch,
  handworkBillSearch
} from '@/api/dashboard'

export default {
  data() {
    return {
      multipleSelection: [],
      networkList: [],

      billdh: '',
      ysloading: false,
      yfloading: false,
      sgloading: false,
      activeName: 'first',
      // 应收表头
      ysth: [],
      // 应收账单
      billForm: {
        checkName: '',
        timeType: 1,
        startTime: '',
        endTime: '',
        checkType: '',
        checkObjectName: '',
        collectType: '',
        settleSubjectId: '',
        dataSource: '',
        payer: '',
        codes: [],
        pageDate: {
          pageNum: 1,
          pageSize: 10
        }
      },
      // 应付表头
      yfth: [],
      // 应付账单
      payForm: {
        checkName: '',
        startTime: '',
        endTime: '',
        checkType: '',
        checkObjectName: '',
        payStatus: '',
        settleSubjectId: '',
        dataSource: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        }
      },
      Time: '',
      options: [],
      radio: 1,
      value1: '',
      // 手工账单表头
      sgth: [],
      handForm: {
        networkNameId: '',
        startTime: '',
        endTime: '',
        closedPayType: '',
        objectType: '',
        objectName: '',
        settleSubjectId: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        }
      },
      // 收账单
      billTableData: [],
      // 付账单
      payTableData: [],
      // 手工账单录入
      handTableData: [],

      YsSettleSubjectList: [],
      tableData: [],
      billTotal: 0,

      payTotal: 0,

      handTotal: 0,

      props: {
        value: 'title',
        label: 'title',
        children: 'networkSettleSubjects'
      }

    }
  },
  computed: {
    billCodesString: {
      get() {
        return this.billForm.codes.join(',')
      },
      set(value) {
        this.billForm.codes = value !== '' ? value.split(',').map(item => item.trim()) : []
      }
    }
  },
  created() {
    this.getYSZBJS()
    this.getOutLet()
  },
  methods: {
    // 获取网点列表
    getOutLet() {
      getOutletsList().then((res) => {
        if (res.code === 200) {
          this.networkList = res.data
        }
      })
    },

    yshandleClick(tab, event) {
      // console.log(tab, event)
      this.Time = []
      if (this.activeName === 'first') {
        this.billClear()
      } else if (this.activeName === 'second') {
        this.payClear()
      } else {
        this.handClear()
      }
    },
    // 显示应收结算科目
    getYSZBJS() {
      getnetworkList().then((res) => {
        console.log('结算科目', res)
        if (res.code === 200) {
          this.YsSettleSubjectList = res.data
        } else {
          this.$message({
            message: res.msg,
            type: 'warning'
          })
        }
      })
    },
    // 结算科目
    yfhandleChange(value) {
      console.log(value)
      this.billForm.settleSubjectId = value[1]
    },
    yshandleChange(value) {
      this.billForm.settleSubjectId = value[1]
    },
    handhandleChange(value) {
      console.log(value)
      this.handForm.settleSubjectId = value[1]
    },
    // 日期转换
    billDateChange(value) {
      if (value && value.length > 0) {
        this.billForm.startTime = value[0]
        this.billForm.endTime = value[1]
      } else {
        this.payForm.startTime = ''
        this.payForm.endTime = ''
      }
    },
    // 应付款日期转换
    payDateChange(value) {
      if (value && value.length > 0) {
        this.payForm.startTime = value[0]
        this.payForm.endTime = value[1]
      } else {
        this.payForm.startTime = ''
        this.payForm.endTime = ''
      }
    },
    // 手工账单日期转换
    handDateChange(value) {
      if (value && value.length > 0) {
        this.handForm.startTime = value[0]
        this.handForm.endTime = value[1]
      } else {
        this.payForm.startTime = ''
        this.payForm.endTime = ''
      }
    },
    // 应收账单查询
    billSearch() {
      if (this.billForm.startTime === '') {
        this.$message('请选择时间')
        return
      }

      this.ysloading = true

      accountReceivableSearch(this.billForm).then((res) => {
        this.ysloading = false

        console.log('查询', res)
        if (res.code === 200) {
          this.billTableData = res.data.list.data
          this.billTotal = res.data.list.total
          this.ysth = res.data.fields
        } else {
          this.billTableData = []
          this.billTotal = 0
        }
      })
    },

    // 应付账单查询
    paySearch() {
      this.yfloading = true

      billPayableSearch(this.payForm).then((res) => {
        this.yfloading = false

        // console.log('搜索应付账单', res)
        if (res.code === 200) {
          this.payTableData = res.data.list.data
          this.payTotal = res.data.list.total
          this.yfth = res.data.fields
        } else {
          this.payTableData = []
          this.payTotal = 0
        }
      })
    },

    // 手工账单查询
    handSearch() {
      this.sgloading = true

      handworkBillSearch(this.handForm).then((res) => {
        this.sgloading = false

        if (res.code === 200) {
          this.handTableData = res.data.list.data
          this.handTotal = res.data.list.total
          this.sgth = res.data.fields
        } else {
          this.handTableData = []
          this.handTotal = 0
        }
      })
    },

    // 应收账单重置
    billClear() {
      this.Time = []
      this.$refs.billForm.resetFields()
      this.billForm.startTime = ''
      this.billForm.endTime = ''
    },

    // 应付账单重置
    payClear() {
      this.Time = []
      this.$refs.payForm.resetFields()
      this.payForm.startTime = ''
      this.payForm.endTime = ''
    },

    // 应付账单重置
    handClear() {
      this.Time = []
      this.$refs.handForm.resetFields()
      this.handForm.startTime = ''
      this.handForm.endTime = ''
    },
    yfhandleSizeChange(val) {
      this.payForm.pageDate.pageSize = val
      this.payForm.pageDate.pageNum = 1
      this.paySearch()
    },
    yfhandleCurrentChange(val) {
      this.payForm.pageDate.pageNum = val
      this.paySearch()
    },
    yfhandleSelectionChange(val) {
      this.multipleSelection = val
    },
    yshandleSizeChange(val) {
      this.billForm.pageDate.pageSize = val
      this.billForm.pageDate.pageNum = 1
      this.billSearch()
    },
    yshandleCurrentChange(val) {
      this.billForm.pageDate.pageNum = val
      this.billSearch()
    },
    yshandleSelectionChange(val) {
      this.multipleSelection = val
    },

    handleSizeChange(val) {
      this.handForm.pageDate.pageSize = val
      this.handForm.pageDate.pageNum = 1
      this.handSearch()
    },
    handleCurrentChange(val) {
      this.handForm.pageDate.pageNum = val
      this.handSearch()
    },
    sghandleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style lang="scss" scoped>
.txt {
  color: red;
  font-size: 18px;
  padding-right: 10px;
}
.box {
  padding: 20px;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.cx {
  width: 80px;
  height: 42px;
  background: #2087d0;
  border-radius: 21px;
  color: #fff;
}
.cz {
  width: 80px;
  height: 42px;
  border-radius: 21px;
  border: 1px solid #666666;
  color: #333;
}
.page > span {
  color: #2087d0;
}
</style>
